import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import qs from 'query-string'
import moment from 'moment'
import Tab from './../../components/common/TabVertical'
import ask from '../../serve/api'
import CompanyInfo from './../../components/Company/Info/Info'
import {localClass} from './Info.scss'

export default class Info extends Component {
  constructor(props){
    super(props);
    const { type } = qs.parse(props.location.search)
    console.log(type)
    this.state = {
      index : Number(type) || 0,
      tabs : [{
        name: '单位简介',
        contentData:{},
      },{
        name: '单位领导',
        contentData:{
          list : []
        },
      }, {
        name: '机构设置',
        contentData:{},
      }],
    }
  }
  
  componentDidMount() {
    this.fetchListLeader();
  }

  onTab(item, index) {
    this.setState({
      index,
    });
    if(index === 1){
      this.fetchListLeader();
    };
  }

  async fetchListLeader(){
    const { code, result } = await ask["listOrgLeader"]({
      page : 1,
      pageSize : 10,
    });
    try {
      if (code !== '000000') {
        throw new Error('数据出错');
      };
      
      const {tabs} = this.state;
      tabs[1].contentData.list = result || [];
      this.setState({
        index : 1,
        tabs,
      });

    } catch (error) {
      console.log(error);
    }
  }

  render() {
    const {
      index,
      tabs,
    } = this.state;

    return (
      <div className={localClass}>
        <Tab tabs={tabs} selected={index} onTab={(item, index) => this.onTab(item, index)} />
        <div className="info_content">
          { index === 0 && <CompanyInfo />}
          { index === 1 && (
            <ul className="commonlist">
              { tabs[index].contentData.list.map((item, index)=> <li key={index}>
                <Link to="/" title={item.name}>{item.name}</Link>
                <span className="date">{moment(item.time).format('YYYY-MM-DD')}</span>
              </li> ) }
            </ul>
          ) }
        </div>
      </div>
    )
  }
}
